<template>
  <div class="published">
    <div id="essay">
            <div id="inner" v-for='(val,key) in usersendinf'>
                <ul>
                    <li><img
            id="innerImg"
            :src="headpic"
            alt='更换头像'
            title="更换头像"
          /></li>
                    <li><span class="loginName">发布于{{renderTime(usersendinf[key].upTime)}}</span></li>
                    <li><a class="fa fa-trash delpublished" @click='delpublished(usersendinf[key].upmenuId)'>删除</a></li>
                </ul>
                <div id="pic">
                    <div id='text'>{{usersendinf[key].upmenuTitle}}</div>
                    <img :src="showpic(usersendinf[key].finishPic)" alt="">
                    <div id='story1'>{{usersendinf[key].story}}</div>
                    <a class="detailed" @click="usersenddetail(usersendinf[key].upmenuId)">>>详情...</a>
                    <!-- <a href="" class="detail" @click='detailshare(usersendinf[key].upmenuId)'>详情...</a> -->
                    <!-- <router-link :to="'/personal/published/' + usersendinf[key].upmenuId" class="detailed">>>详情...</router-link> -->
                </div>
            </div>
        </div>
  </div>
</template>
<script>
export default{
    inject:['reload'],   //实现数据库变化时的实时更新（注入）  
  data(){
    return{
        usersendinf:[],
        headpic:'',
        imgurl: "",
    };
  },
  methods:{
    // 详情链接
    usersenddetail(index){
      this.$router.push('/index/sharedetail/'+index)
    },
    showpic(pic){
       return require("../../../../Eatproj/EAT/public/upload/" + pic);
    },
      //时间转码
    renderTime(date) {
      var dateee = new Date(date).toJSON();
      return new Date(+new Date(dateee) + 8 * 3600 * 1000)
        .toISOString()
        .replace(/T/g, " ")
        .replace(/\.[\d]{3}Z/, "");
    },
     delpublished:function(index){
        let self=this
         this.$axios.delete('http://localhost:3000/share/personal/'+index)
         .then(res => {
            console.log(res.data.data)
            self.reload()   //实现数据库变化时的实时更新（调用）
        })
        .catch(err => {
            console.log('错误信息：',err)
        })
         
     },
    //  detailshare:function(delindex){
    //      this.$axios.get('http://localhost:3000/share/publishdetail/'+delindex)
    //      .then(res => {
    //         console.log(res.data.data)
    //     })
    //     .catch(err => {
    //         console.log('错误信息：',err)
    //     })
    //  }
 },
  created(){
      //头像
      this.$axios
      .get("http://localhost:3000/users/personal")
      .then(res => {
        // console.log(res.data.data[0])
        // console.log(res.data.data[0].headPic)
        // console.log(res.data.data[0]);
        this.imgurl = res.data.data[0].headPic;
        this.headpic = require("../../../../Eatproj/EAT/public/upload/" +
          this.imgurl);
        this.userintro = res.data.data[0].intro;
      })
      .catch(err => {
        console.log("错误信息：", err);
      });
    //查看已经发布的内容
     this.$axios.get('http://localhost:3000/share/publish')
    .then(res => {
        this.usersendinf=res.data.data
        console.log(res.data.data)
        console.log(res.data.data[0].finishPic)
    })
    .catch(err => {
      console.log('错误信息：',err)
    })
  }
}
</script>
<style lang="css" scoped>
.published {
    width: 80%;
    /* background: red; */
    /* height: 1500px; */
    margin: auto;
    position: absolute;
    left: 250px;
}
.published #essay{
    width: 80%;
    height: 100%;
}
.published #essay #inner{
    margin: 10px;
    float: left;
    width: 90%;
    height: 250px;
    min-width: 700px;
    border: 1px solid #ccc;
    /* background-color:rgb(198, 229, 153); */
}
.delpublished{
    cursor: pointer;
}
.published #essay #inner #pic{
    float: left;
    width: 100%;
    height: 100%;
    padding-left: 100px; 
    /* background-color:rgb(173, 206, 128); */
}
.published #essay #inner #pic #text{
  width:280px;
  width:150px;
  font-size: 15px;
  line-height: 150px;
  margin-left: -75px;
  float: left;
}
.published #essay #inner #pic .detailed{
    text-decoration: none;
    color:green;
    font-size: 15px;
    position: relative;
    top:67px;
    left: 25px;
}
.published #essay ul{
    width: 100%;
    float: left;
    background: linear-gradient(45deg, rgb(160, 191, 124), rgb(255, 255, 255)) fixed;
}
.published #essay ul li:first-child {
    float: left;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border:1px solid #ccc;
    border-radius: 50%;
    margin: 5px 20px;

}

#innerImg{
    float: left;
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
}
.published #essay ul li{
    float: left;
    margin: 20px;
    width: 35%;
    height: 20px;
    line-height: 20px;
}
.published #essay ul li:last-child{
    float: right;
    padding-left: 20%;
}
.published #essay #pic img{
    width: 150px;
    height: 150px;
    margin-left:-20px;
    float: left;
    position: relative;
}
.published #essay #pic #story1{
    float: left;
    width: 300px;
    height: 150px;
    overflow: hidden;
    margin-left: 30px;
}
</style>